@keyframes SoundWaveAnimate {
    20%{
        transform: scale(120%);
    }50%{
        transform: scale(90%);
    }70%{
        transform: scale(110%);
    }100%{
        transform: scale(100%);
    }
}
@keyframes SoundWaveBorderAnimate {
    to{
        transform: scale(150%);
        opacity  : 0;
    }
}
.IsBorderBox{
    box-sizing: border-box;
}
.HConsultWrapper{
    .OpenChat{
        position  : fixed;
        right     : 40px;
        bottom    : 20px;
        box-shadow: rgb(0 0 0 / 10%) 0px 1px 6px, rgb(0 0 0 / 20%) 0px 2px 24px;
        >span{
            font-size  : 30px;
            line-height: 59px;
        }
    }
    .ant-btn-icon-only.ant-btn-lg {
        width : 60px;
        height: 60px;
    }
}
.ant-popover{
    position: fixed;
}
.HConsult{
    width   : 370px;
    height  : 530px;
    position: relative;
    .ant-card-body{
        position: relative;
        padding : 0;
        height  : 470px;
        .Consulting{
            width           : 100%;
            height          : 420px;
            overflow-y      : auto;
            &::-webkit-scrollbar{
                width: 0;
            }
            >audio{
                display: none;
            }
            ul >li{
                clear        : both;
                box-sizing   : border-box;
                padding      : 10px;
                margin-bottom: 10px;
                max-width    : 250px;
            }
            .MyMessage{
                float           : right;
                border-radius   : 10px 0 10px 10px;
                background-color: rgb(57, 106, 255);
                color           : white;
            }
            .OtherMessage{
                float           : left;
                border-radius   : 0 10px 10px 10px;
                background-color: rgb(234, 240, 246);
            }
            .SystemMessage{
                font-size: 14px;
                color    : rgb(123, 152, 182);
            }
            .VoiceIcon{
                font-family: 'FontAwesome';
                box-sizing : border-box;
                padding    : 10px 40px;
                &::before{
                    content:"\f028";
                }
            }
            .HouseMessage{
                display       : flex;
                flex-direction: column;
                >div{
                    display        : flex;
                    flex-direction : column;
                    justify-content: space-around;
                    user-select    : none;
                    cursor         : pointer;
                    margin-top     : 10px;
                    >p{
                        margin: 0;
                    }
                    & >p:nth-child(1){
                        font-weight: bold;
                        font-size  : 16px;
                    }
                    & >p:nth-child(3){
                        font-size  : 16px;
                        color      : #fe615a;
                    }
                }
            }
        }
        .MessageInput{
            width   : 100%;
            height  : 40px;
            position: absolute;
            bottom  : 0;
            >input{
                width     : 230px;
                height    : 100%;
                border    : none;
                outline   : none;
                box-sizing: border-box;
                padding   : 5px;
                font-size : 17px;
                &::placeholder{
                    color: rgb(123, 152, 182);
                }
            }
            >button{
                color        : rgb(57, 106, 255);
                border-radius: 100%;
                &:hover{
                    background-color: rgb(123, 152, 182,.2)
                }
            }
        }
    }
    .HInfoTag{
        position: absolute;
        bottom  : 60px;
        .ant-tag{
            position     : relative;
            border-radius: 10px;
        }
        .ant-tag-close-icon{
            position: absolute;
            right   : 10px;
            top     : 10px;
        }
        .TagContent{
            padding        : 10px;
            box-sizing     : border-box;
            display        : flex;
            justify-content: space-around;
            >img{
                width : 130px;
                height: 90px;
            }
            >div{
                display        : flex;
                flex-direction : column;
                justify-content: space-around;
                margin-left    : 10px;
                >p{
                    margin: 0;
                }
                & >p:nth-child(1){
                    font-weight: bold;
                    font-size  : 16px;
                }
                & >p:nth-child(3){
                    font-weight: bold;
                    font-size  : 16px;
                    color      : #fe615a;
                }
            }
            >button{
                align-self : flex-end;
                margin-left: 15px;
            }
        }
    }
}
.EmojiList{
    box-sizing     : border-box;
    padding        : 10px;
    >ul:nth-child(1){
        display  : flex;
        flex-wrap: wrap;
        width    : 300px;
        >li{
            box-sizing: border-box;
            padding: 3px;
            border-radius: 5px;
            &:hover{
                background-color: rgba(1,1,1,.1);
            }
        }
    }
    .ant-pagination{
        display        : flex;
        justify-content: center;
    }
}
.RecordingVoice{
    position  : relative;
    box-sizing: border-box;
    padding   : 10px;
    .SoundWave{
        width        : 100%;
        height       : 100%;
        border-radius: 100%;
        top          : 0;
        left         : 0;
        position     : absolute;
        background-color: rgb(234, 240, 246);
        animation    : SoundWaveAnimate .7s ease-in infinite;
    }
    .SoundWaveBorder{
        width        : 100%;
        height       : 100%;
        position     : absolute;
        top          : 0;
        left         : 0;
        border-radius: 100%;
        opacity      : .6;
        transform    : scale(75%);
        border       : 1px solid rgb(123, 152, 182);
        animation    : SoundWaveBorderAnimate .9s ease-out infinite;
    }
}
.VoiceTranslate{
    @extend .IsBorderBox;
    padding : 10px;
    position: relative;
    .Wave{
        position     : absolute;
        border       : 1px #396aff solid;
        width        : 70px;
        height       : 70px;
        border-radius: 100%;
        top          : 50%;
        left         : 50%;
        margin-left  : -35px;
        margin-top   : -35px;
        animation    : SoundWaveBorderAnimate .9s ease-out infinite;
    }
}
